<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        #div1 {
            width: 600px;
            height: 600px;
            border: 3px solid black;
            position: relative;
            margin: 100px auto;
            background-color: skyblue;
        }

        #ball {
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            ;
            left: 290px;
            bottom: 30px
        }

        #bat {
            width: 100px;
            height: 30px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 250px;
        }

        #zhuankuai>div {
            width: 98px;
            height: 18px;
            border: 1px solid black;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 打砖块思想

            1————首先要设置一个大的盒子(div)装里面的砖块和小球
                    设置一个大盒子给个样式就好了
            2————设置好小球的样式
                    把小球写在大盒子中，设置样式
                    设置小球在盒子中运动

            3————滑块样式  
                    设置好滑块的样式
                    利用 拖拽 的常见写法，完成滑块在大盒子中可以在下方左右移动  
            4————砖块的样式    
                    在大盒子的上方放一个装小砖块的中盒子——————一样设置好样式
                    通节点和for循环的方法，添加小砖块到中盒子里
                    通过随机颜色给每个小砖块加上颜色
            5—————碰撞检测          
                    碰撞检测原理：
                        不好判断两个物体是否碰撞，就判断两个物体还相差多少不会碰撞
                    通过设置好碰撞函数，给滑块和小球添加碰撞判断
                    再给小球和小砖块添加碰撞判断
        -->


    <!-- 这里定义的是大盒子 -->
    <div id="div1">
        <!-- 这里定义的是小球 -->
        <div id="ball"></div>
        <!-- 这里定义滑块 -->
        <div id="bat"></div>
        <!-- 定义上方砖块位置 -->
        <div id="zhuankuai"></div>
    </div>
</body>

</html>
<script>
    /*

    */
    window.onload = function () { //  这里是当页面加载完成时，执行下面的代码，也就是打砖块游戏——————(window.onload: 页面加载完成)
        ///////////获取页面中的元素模板开始/////////
        let div1 = document.getElementById('div1')
        let ball = document.getElementById('ball')
        let bat = document.getElementById('bat')
        let zhuankuai = document.getElementById('zhuankuai')
        let xiaozhuankuai = zhuankuai.getElementsByTagName('div')
        ///////////获取页面中的元素模板开始/////////




        ///////////////// 调用事件区模块开始/////////////////
        //console.log(bat)
        huakuai(bat) //这里调用了拖拽函数————使得滑块可以经行左右移动
        zk(60) //调用了小砖块添加函数——————设置参数为60，添加60个参数
        /////////////////// 调用事件区模块结束////////////////




        /////////////////////小球运动模块开始/////////////
        let speedX = parseInt(Math.random() * 4) + 3; //这里设置小球的速度，设置一个随机数使得小球运动起来更生动形象。这里设置的是3-6
        let speedY = -(parseInt(Math.random() * 3) + 5); //同理这里给垂直方向上给一个随机速度   //设置负值，使得小球一开始的时候是从下往上运动

        setInterval(function () { ///这里设置定时器让小球每隔一段时间移动一段距离

            ball.style.left = ball.offsetLeft + speedX + 'px'; ///这里给小球水平方向上添加速度，也可以理解为距离
            ball.style.top = ball.offsetTop + speedY + 'px'; ///这里给小球垂直方向上添加速度

            //这里需要给小球添加限制，使得小球到达大盒子边缘的时候能够挺住并反方向运动(给个if判断小球距离大合子边缘的距离)
            if (ball.offsetLeft >= 580 || ball.offsetLeft <= 0) {
                speedX *= -1 //这里乘以一个-1可以使得小球在到达大盒子边缘两侧的时候速度取反，使得小球反方向运动，达到在大盒子中左右运动的效果
            }
            if (ball.offsetTop >= 580 || ball.offsetTop <= 0) { //同理这里个垂直方向上给小球添加设置使得小球在垂直方向上来回运动
                speedY *= -1
            }
            //////////////////////// // 碰撞检测模块开始/////////////
            //这里是把碰撞检测写在了小球运动的定时器里 为什么:因为小球运动这个定时器间隔很短就会执行一次代码，也就是检测一次碰撞，这样在怎么撞都可以检测出来
            // 这里设置滑块和小球的碰撞检测
            if (pengzhuang(ball, bat)) { //通过调用碰撞检测函数，检测小球和滑块是否碰撞
                speedY *= -1; //当滑块和小球进行碰撞时，给速度乘以一个负值，就可以达到反方向运动，实现小球碰撞反弹效果
            }
            //这里设置小球与大盒子中小砖块的碰撞检测 检测小球与大盒子中所有的小砖块是否有碰撞
            for (var i = 0; i < xiaozhuankuai
                .length; i++) { //因为小砖块有好多个，所有通过for循环，检测每个小砖块（这里的xiaozhuangkuai对象在）
                // console.log(12313)
                if (pengzhuang(xiaozhuankuai[i], ball)) { //这里的就是碰撞检测每个小砖块，
                    speedY *= -1;
                    zhuankuai.removeChild(xiaozhuankuai[i]); //这里是删除节点，通过父级删除子级元素节点
                    break;
                }
            }
            /////////////// // 碰撞检测模块结束/////////////
        }, 100)
    }

    /////////////////////小球运动模块开始/////////////



    ////////////////////////滑块拖拽函数模块开始///////////////////////////
    function huakuai(node) { //这里定义一个滑块函数，形参就是要实现拖拽的元素
        node.onmousedown = function (ev) { //这里用到鼠标按下事件 当鼠标按下后执行下面的代码(mousedown：按下鼠标键时触发)
            var e = ev || window.event; //事件兼容写法  

            var jubig = e.clientX - node
                .offsetLeft //这里计算滑块在大盒子中的距离 用当前鼠标相对于左边的水平坐标 — 滑块距离大盒子的距离 = 大盒子距离浏览器左侧距离加上鼠标距离滑块左侧的距离
            document.onmousemove = function (ev) { //这里用到鼠标跟随事件 使得在鼠标按下后鼠标动的时候执行下面代码(mousemove：鼠标移动事件。)

                var e = ev || window.event; //事件兼容写法

                let l = e.clientX -
                jubig; // 定义一个变量接收滑块在距离左右的距离  当前距离浏览器左边的水平坐标 - 大盒子距离浏览器左侧距离加上鼠标距离滑块左侧的距离 =滑块距离大盒子的距离   ( 注意：这里不是1，是英文字母L)

                if (l <= 0) { //通过判断使得滑块限制在大盒子中
                    l = 0
                }
                if (l >= 500) { //这里设置500是因为大盒子宽600，滑块自身100，设置的距离就是盒子的块减去滑块自身的宽
                    l = 500
                }

                node.style.left = l + 'px' //( 注意：这里不是1，是英文字母L,是上面定义经行判断的L)
            }
        }
        document.onmouseup = function () { //这里当鼠标移开时 将上面的鼠标跟随事件清除  (mouseup：释放按下的鼠标键时触发。)
            // console.log(222)
            document.onmousemove = null;

        }

    }
    ////////////////////滑块拖拽函数模块结束/////////////////////////////





    /////////////////// 砖块模块开始///////////////////////////////

    // 随机颜色函数--百度一大堆
    var getRandomColor = function () {
        return "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')';
    }


    //创建一个函数用来创建砖块
    function zk(n) { //这里形参设置的是你要创建多少个小砖块的数量
        for (let i = 0; i < n; i++) { //通过for循环给砖块div添加小砖块
            let node = document.createElement('div') //这里创建节点（也就是创建小砖块）
            node.style.backgroundColor = getRandomColor() //改变小砖块的颜色
            zhuankuai.appendChild(node) //把小砖块放进大砖块div里面
        }
    }
    //////////////////////////// 砖块模块结束///////////////////////////////




    ///////////////////// 碰撞模板开始/////////////////////////
    function pengzhuang(node1, node2) { //设置好两个形参用来接收，要比较的对象
        var l1 = node1.offsetLeft; //获取第一个元素距离作用对象左侧边缘的水平距离 (offsetLeft属性返回鼠标位置距离事件作用对象左侧边缘的水平距离)
        var r1 = node1.offsetLeft + node1.offsetWidth; //同一行一样，但是这里加了元素自身的宽度(为什么加宽度:是因为我们要获取到这里元素右侧也是距离作用对象左侧的水平距离，如果一下获取left，一下获取right，这样两个值不好进行两个元素的比较)
        var t1 = node1.offsetTop; //原理同上
        var b1 = node1.offsetTop + node1.offsetHeight //原理同上

        var l2 = node2.offsetLeft; //原理同上
        var r2 = node2.offsetLeft + node2.offsetWidth; //原理同上
        var t2 = node2.offsetTop; //原理同上
        var b2 = node2.offsetTop + node2.offsetHeight //原理同上

        if (l2 > r1 || r2 < l1 || t2 > b1 || b2 <t1) { //这里是第二个元素的左边如果大于第一个元素的右边.....(省略了一些，打字好累)第二个元素下面如果小于第一个元素上面，这些都是没有碰撞的时候
            return false
        } else {
            return true
        }
    }
    //////////////////////// 碰撞模板结束///////////////////
</script>